{extend name="common/index" /} {block name="style"}
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/index.css" type="text/css">
<link rel="stylesheet" href="__TEMPLATE__/mobile/index/css/member.css" type="text/css">
<script type="text/javascript" src="__TEMPLATE__/sysme/js/aa.js"></script>
<link rel="stylesheet" type="text/css" href="__SYSMET__/lib/Hui-iconfont/1.0.8/iconfont.css" />

<script src="__TEMPLATE__/sysme/tili/js/jquery.1.7.2.min.js"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_002.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_004.js" type="text/javascript"></script>
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll_002.css" rel="stylesheet" type="text/css">
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll.css" rel="stylesheet" type="text/css">
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_003.js" type="text/javascript"></script>
<script src="__TEMPLATE__/sysme/tili/js/mobiscroll_005.js" type="text/javascript"></script>
<link href="__TEMPLATE__/sysme/tili/css/mobiscroll_003.css" rel="stylesheet" type="text/css"> {/block} {block name="body"}

<style type="text/css">
	
	.czjekj {
		display: inline-block;
		width: 20%;
		height: 20px;
		text-align: center;
		font-size: 12px;
		border: 1px solid #ccc;
		color: #000;
		border-radius: 6px;
		line-height: 20px;
		background: #cccccc91;
		margin-bottom:10px;
	}
	
	form {
		display:block;
		width: 100%;
		margin-top: 75px;
	}
	
	.xzfs {
		width: 100%;
	}
	
	.xzfs>div {
		overflow: hidden;
		margin:0 5% 15px;
	}
	
	.xzfs div>span {
		width:25%;
		display: block;
		font-size: 14px;
		font-weight: bold;
		float: left;
		height: 30px;
		line-height: 30px;
		
	}
	
	.xzfs div input {
		
		display: block;
		float: left;
		width: 75%;
		text-indent: 5px;
		height:30px;
		line-height:30px;
		color:#675656;
	}
	
	
	
	#tijiao {
		width: 90%;
		height: 30px;
		display:block;
		line-height: 30px;
		background: #d91d36;
		border-radius: 4px;
		color: #fff;
		margin:20px auto;
		font-size: 12px;
	}
</style>

<form method="post" enctype="">
	<div class="xzfs">
		<div>
			<span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号&nbsp;:&nbsp;</span>
			<input type="text" style="border:1px solid #ccc;text-indent: 4%;" id="username" name="username" value="{$username}" readonly="readonly" />
		</div>
		<div>
			<span style="float:left;">充值金额：</span> 
				 <input type="hidden" style="width:0;border:1px solid #ccc;text-indent: 4%;" name="amount" id="amount"  onchange="if(this.value<=0) this.value=0;" required="required" value="" >
				<p style="float:left;overflow: hidden;width:75%;" class="czje_q">
					<span class="czjekj">50元</span>
					<span class="czjekj" id="czje_y">100元</span>
					<span class="czjekj" id="czje_e">200元</span>
					<span class="czjekj" id="czje_ws" style="">500元</span>
					<span class="czjekj" id="czje_bab" style="">800元</span>
					<span class="czjekj" id="czje_yiq" style="">1000元</span>
					<span class="czjekj" id="czje_yiqw" style="">1500元</span>
				</p>
		</div>
<!-- 		<div>
			<span >选择账户：</span> 
			<div>
			{foreach($online_ac as $vac)}
				<div id="Online_{$vac.id}" class="zfb_xs_zh" style="float:left;overflow: hidden;width:auto;margin-right:10px;height:40px;border:1px dashed #807d7d;padding:5px;">
					<img style="width:30px;float:left;margin-right:5px;margin-top:3px;" src="__TEMPLATE__/mobile/index/img/zfb.png" />
				    <p style="float:left;height:100%;line-height:30px;font-size:14px;color:#807d7d;">{$vac.name}</p>
				</div>
			{/foreach}
			</div>
		</div> -->
		
	</div>
	<input class="tijiao" id="tijiao" type="button" value="提交" />
</form>
<div style="width:100%;height:100%;position:fixed;background:#fff;display:none;padding-top:10px;top:44px;font-size:14px;" id="zfb_pay">
	<div style="text-align:center;">
		<span style="color:#FF0000;display:block;margin:0 auto;width:100%;text-align: center;" > 充值账号：&nbsp;&nbsp;<i id="zfb_pay_name" style="font-style: normal;"></i></span>
		<span style="color:#FF0000;display:block;margin:0 auto;width:100%;text-align: center;" > 充值金额：&nbsp;&nbsp;<i id="zfb_pay_money"  style="font-style: normal;"></i></span>
		<img id="zfb_pay_img" src="" style="margin-top:10px;"  width="190" ><br />
		<span style="color:#FF0000;display:block;margin:0 auto;width:100%;text-align: center;" >[打开支付宝，扫码支付]</span>
		<div style="width:100%;color:#FF0000;display:text-align: center;" id="zfb_djs">05分00秒失效</div>
		<div style="width:50%;padding:10px 15px;border:1px solid #ccc;text-align: center;height:40px;margin:10px auto 0;" id="zfb_pay_success">我已支付</div>
	</div>
</div>
<div id="tishi" style="width:210px;height:40px;opacity: .6;background:#000;position:fixed;left:50%;margin-left:-100px;top:100px;display:none;top:30%;"></div>
		<div id="tishi_nr" style="width:210px;height:auto;color:#fff;font-size:14px;text-align:center;position:fixed;left:50%;top:30%;margin-left:-100px;z-index: 1;display:none;padding:10px;"></div>
<script>
	var aid=''
	var zfb_minute = "4";
	var zfb_second = "60";
	var aclass=''
	$('.czje_q').children('span').click(function(){
		$('.czje_q').children('span').css('background','')
		$('.czje_q').children('span').css('color','#000')
		$(this).css('background','#d91d36')
		$(this).css('color','#fff')
		 aclass=$(this).attr('class')
			var str = $(this).html();
			var s=str.substring(0,str.length-1)
			$('#amount').val(s);
	})
	$('.zfb_xs_zh').click(function(){
		$('.zfb_xs_zh').css('border','1px dashed #807d7d')
		$(this).css('border','1px solid red')
		aid=$(this).attr('id')
	})
	$('#tijiao').click(function(){
		
			
			if(aclass==''){
				$('#tishi').css('display', 'block')
				$('#tishi_nr').css('display', 'block')
				$('#tishi_nr').html('请选择充值金额')
				setTimeout(function() {
					$('#tishi').css('display', 'none')
					$('#tishi_nr').css('display', 'none')
				}, 2000)
			/* }else if(aid==''){
				$('#tishi').css('display', 'block')
				$('#tishi_nr').css('display', 'block')
				$('#tishi_nr').html('请选择充值账户')
				setTimeout(function() {
					$('#tishi').css('display', 'none')
					$('#tishi_nr').css('display', 'none')
				}, 2000) */
			}else{
				$(this).val('提交中')
				    var zfb_pay_money=$('#amount').val();
					$.ajax({
						type: "post",
						url: "{:url('index/pay/buildCode')}",
						data: {
							'type':'alipay','money':zfb_pay_money,'username':$('#username').val()
						},
						success: function(data) {
							$($('#tijiao')).val('提交')
							zfb_minute = "4";
		                    zfb_second = "60";
							console.log(data)
							if(data.status=='200'){
								$('#zfb_pay').show()
								$('#zfb_pay_img').attr('src','__CODE__/'+data.data.code)
							    $('#zfb_pay_name').html($('#username').val())
							    $('#zfb_pay_money').html(data.data.money)
							    var zfb_timer=setInterval(DownTick_zfb,1000);
							    aclass=''
			                    aid=''
			                    $('.czje_q').children('span').css('background','')
		                        $('.czje_q').children('span').css('color','#000')
		                        $('.zfb_xs_zh').css('border','1px dashed #807d7d')
							}else{
								//alert(data.info)
								$('#tishi').css('display', 'block')
								$('#tishi_nr').css('display', 'block')
								$('#tishi_nr').html(data.info)
								setTimeout(function() {
									$('#tishi').css('display', 'none')
									$('#tishi_nr').css('display', 'none')
								}, 2000)
								aclass=''
			                    aid=''
			                    $('.czje_q').children('span').css('background','')
		                        $('.czje_q').children('span').css('color','#000')
		                        $('.zfb_xs_zh').css('border','1px dashed #807d7d')
							}
					     
	                      
						}

						 

					});
					
			}
			
		    
		  })
		
		function DownTick_zfb(){
			var zfb_sss=$('#zfb_djs').html()
			 if(zfb_second=='01'&&zfb_minute=='00') {
		             $('#zfb_pay').hide()
		              window.location.reload()
		        };
		         zfb_second--;
		        if(zfb_minute=='4'){
		        	zfb_minute = "0" + zfb_minute;
		        }
		        if(zfb_minute=='0'){
		        	zfb_minute = "0" + zfb_minute;
		        }
		        if(zfb_second == 00) {
		             zfb_second = 59;
		             zfb_minute--;
		             if(zfb_minute < 10) zfb_minute = "0" + zfb_minute;
		         }; 
		         if(zfb_second < 10) zfb_second = "0" + zfb_second;
		         $('#zfb_djs').html(zfb_minute+'分'+zfb_second+'秒失效')
		        
		}
		$('#zfb_pay_success').click(function(){
			$('#zfb_pay').hide()
			 window.location.reload()
		})
		
	
</script>

{/block}